<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    placement="right"
    :closable="false"
    :visible="visible"
    @close="onClose"
  >
    <a-card class="card-header">
      <a-form-model ref="modelForm" :model="model">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="extockNum"
              label="出库单号"
            >
              <a-input
                disabled
                placeholder="请输入出库单号"
                v-model.trim="model.extockNum"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="worksheetNum"
              label="加工单号"
            >
              <a-input
                disabled
                placeholder="请输入加工单号"
                v-model.trim="model.worksheetNum"
              />
            </a-form-model-item>
          </a-col>

          <a-col :span="6">
            <a-form-model-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              prop="worksheetQuantity"
              label="加工单数量"
            >
              <a-input-number
                :min="0"
                disabled
                style="width:100%"
                placeholder="请输入加工单数量"
                v-model.trim="model.worksheetQuantity"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>

    <!-- 表格区域 -->
    <a-card class="card-content">
      <div class="requiredNews">计划用料</div>
      <br />
      <a-table
        :columns="columns"
        :data-source="model.planDemandQuantityVOList"
        :loading="loading"
        :pagination="false"
        :rowKey="(record, index) => record.id"
      >
      </a-table>
    </a-card>
  </a-drawer>
</template>

<script>
import api from "@/api/apiServer";
import { columns } from "./tableConfig";
import { tableMinxins } from "@/unit/mixins/tableMinxins.js";

export default {
  mixins: [tableMinxins],
  data() {
    return {
      columns,
      visible: false,
      drawerWidth: 1000,
      title: "商品明细",
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {},
    };
  },
  methods: {
    showDrawer(record) {
      let { id } = record;
      if (id) {
        this.getExstockDetailed(id);
      }
      this.visible = true;
    },
    // 获取商品明细
    async getExstockDetailed(id) {
      const res = await api.ExstockDetailed({ id });
      this.model = res.data;
    },
    onClose() {
      this.visible = false;
      this.model = Object.assign({});
      this.current = 1;
    },
  },
};
</script>

<style lang="less" scoped>
.card-header {
  margin: 20px 0;
}
button {
  margin-right: 13px;
}
.card-content {
  margin-bottom: 20px;
  .contetnBox {
    border: 1px solid #ebedf0;
    border-radius: 2px;
    padding: 20px 0;
    .headerBox {
      padding: 0 20px;
    }
  }
}
.ant-form-item {
  margin: 10px 0;
}
.tableSpan {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
}

.footer-btn {
  width: 100%;
  text-align: center;
  margin: 37px 0;
  button {
    width: 200px;
    height: 40px;
    background: #1a5eff;
    border-radius: 2px;
  }
}
.requiredNews {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 600;
  color: #1a5eff;
  margin-bottom: 12px;
}
</style>
